<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接</title>

  <style>
    a:link {color:#FF0000;}		/* 未被访问的链接 */
    a:visited {color:#00FF00;}	/* 已被访问的链接 */
    a:hover {color:#FF00FF;}	/* 鼠标指针移动到链接上 */
    a:active {color:#0000FF;}	/* 正在被点击的链接 */


    div{
        width: 100px;
        height: 100px;
        background-color: #00FF00;
    }

    div:hover{
        background-color: red;
    }

    .box{
        width: 200px;
        height: 200px;
        background-color: red;
    }

    #box1{
        width: 300px;
        height: 300px;
        background-color: red;
    }
  </style>
</head>
<body>


<div>


</div>

<!--
   四种伪类（状态）
-->

<a href="#">链接</a>


<div class="box">


</div>


<p class="box">

</p>


<!--
  id选择器 -- 在 js 中 比较常见
-->
<div id="box1">

</div>

</body>
</html>